<template>
  <div class="form-wrapper">
    <div class="texttitle">
      <h4>笔记编辑</h4>
    </div>
    <div class="form">
      <el-form ref="noteForm" :model="form" label-width="120px">
        <el-form-item label="标题:" :label-width="formLabelWidth" >
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <div class="text">
          <el-form-item label="笔记内容:" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.note_content"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="笔记类型:" :label-width="formLabelWidth">
          <el-select v-model="form.note_type" placeholder="请选择歌曲类型">
            <el-option label="传统民族" value="传统民族"></el-option>
            <el-option label="新国风流行" value="新国风流行"></el-option>
            <el-option label="戏曲融合" value="戏曲融合"></el-option>
            <el-option label="主题文化" value="主题文化"></el-option>
            <el-option label="地域特色" value="地域特色"></el-option>
          </el-select>
        </el-form-item>
        <el-col :span="6">
          <el-form-item label="封面图片:" :label-width="formLabelWidth">
            <el-upload class="avatar-uploader" action="http://localhost:8080/v1/NoteCreate/upload" :show-file-list="false" :on-success="handleSuccess_cover">
              <img v-if="form.image" :src="'http://localhost:8080/images/upload/' + form.image" style="width: 400px; height: 350px;" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
              <el-button icon="Close" type="primary" plain @click="clearImage" v-if="form.image"></el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <div class="button">
          <el-form-item>
            <el-button type="primary" plain @click="submitForm">提交</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button type="primary" plain @click="navigateTo('/my-note')">返回</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
  data() {
    return {
      form: {
        title: '',
        note_content: '',
        note_type: '',
        image: '',
        imageUrl:" "   , //图片URL地址
        note_create_id: '', // 用于存储笔记ID
      },
      formLabelWidth:"140px",   //对话框label宽度
      note_create_id: null, // 用于存储从路由参数中获取的note_create_id
    };
  },

  methods: {
      navigateTo(route) {  
      this.$router.push(route); // 使用路由跳转  
    },  

    clearImage() {
    this.form.image = ''; // 清空图片地址
    
  },

    handleSuccess_cover(response){     
      console.log(response);
    this.form.image=response
  },

    getpageData() {
      axios.get(`/v1/NoteCreateinfo/${this.note_create_id}`)
        .then(response => {
          const noteData = response.data;
          console.log("noteData", noteData);
          this.form.title = noteData.title;
          this.form.note_content = noteData.note_content;
          this.form.note_type = noteData.note_type;
          this.form.note_create_id = noteData.note_create_id; // 确保笔记ID也被设置
          this.form.image = noteData.image;
        })
        .catch(error => {
          console.error('获取笔记详情失败:', error);
        });
    },
    submitForm() {
      axios.put(`/v1/NoteCreateEdit`, this.form)
        .then(response => {
          console.log('笔记更新成功:', response);
          ElMessage({
            type: 'success',
            message: '提交成功待审核！'
          });
          const note = {
          note_create_id: this.form.note_create_id,
          note_status: '待审核',
          // like_count : 0,  //设置收藏量为0
          // view_count : 0,
          // comment_count : 0,
        };
        return this.$http.put(`/v1/NoteCreate/statusReview`, note);
       
        })
        .catch(error => {
          console.error('更新笔记失败:', error);
        });
    },
  },
  components:{
  Plus
}, 
  mounted() {
    this.note_create_id = sessionStorage.getItem('note_create_id');
    console.log("note_create_id:", this.note_create_id); // 拿到笔记id
    if (this.note_create_id) {
      this.getpageData();
    }
  },
};
</script>

<style scoped>
.form-wrapper {
  background-color: #f9fafc;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 60%;
  max-width: 600px;
  margin: 0 auto; /* 使表单居中 */
}

.texttitle h4{
  text-align: center;
  margin-bottom: 20px; /* 增加底部边距 */
  color: #333; /* 设置标题颜色 */
  font-weight: bold; /* 加粗标题 */
}

.el-form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fafafa; /* 背景颜色 */
  padding: 0px; /* 内边距 */
}

.form {
  display: flex;
  flex-direction: column; /* 使表单项垂直排列 */
  align-items: flex-start; /* 使表单项靠左对齐 */
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  width: 100%;
  max-height: 150px; /* 调整最大高度 */
  overflow-y: auto;
  min-height: 50px; /* 设置最小高度 */
  padding: 0px; /* 内边距 */
  border: 1px solid #d9d9d9; /* 添加边框 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px; /* 字体大小 */
}

.avatar-uploader {
  position: relative; /* 使删除按钮可以绝对定位 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader .el-button {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  position: absolute; /* 绝对定位删除按钮 */
  top: 0;
  right: 0;
  margin: 3px; /* 与图片边缘的间距 */
  padding: 10; /* 重置内边距，以便文字和图标可以居中 */
  width: 30px; /* 设置按钮宽度，确保有足够的空间显示文字 */
  height: 30px; /* 设置按钮高度 */
  font-size: 14px; /* 调整字体大小 */
}
</style>